<template>
 <div>
<renderDom  @on-click="getNum" title="我是标题"/>
<button @click="onclick">button</button>
<div  class="showDiv"></div>
</div>
</template>
<script setup lang='ts'> 
  import { StyleValue } from 'vue';
  
import renderDom from '../App'

  let flag = ref<string >('')
  let timer = ref<any>(null)
const onclick =  ()=>{
  flag.value = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'))
  console.log(flag.value)
}
onMounted(()=>{
 timer= setInterval(()=>{
    // onclick()
  },1000)
})
onBeforeUnmount(()=>{
  clearInterval(timer)
  timer = null
  console.log(timer,'1')

})
const getNum = (num:number)=>{
  console.log(num,'父组件出参')
}
</script>
<style scoped lang='less'>
.showDiv{
  width: 200px;
  height: 200px;
  background-color: v-bind(flag);
}
</style>